<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import ExamDialog from "../../../components/subassembly/ExamDialog.vue";
import ShowDialog from "../../../components/subassembly/ShowDialog.vue";
import {$roomExam, $roomTypeExamById} from "../../../api/exam.ts";
import {ElNotification} from "element-plus";
const dialogRef = ref(false)
const showDialogRef = ref(false)
const status = ref('')
const room = ref('')
const roomTypeData = ref([])

//加载房型列表
const loadRoomType = async () => {
  const ret = await $roomExam()
  console.log(ret.t)
  roomTypeData.value = ret.t
}
// 审核弹窗信息
const RoomTypeDialog = async (id: number) => {
  const res = await $roomTypeExamById({id})
  if (res.code === 4001) {
    ElNotification({
      title: '失败！',
      message: '服务器异常，请联系管理员！',
      type: 'error',
    })
    return
  }
  dialogRef.value.examDialog2 = true
  dialogRef.value.formData2 = res.t

}
// 查看弹窗信息
const ShowHotelDialog = async (id: number) => {
  const res = await $roomTypeExamById({id})
  console.log(res)
  if (res.code === 4001) {
    ElNotification({
      title: '失败！',
      message: '服务器异常，请联系管理员！',
      type: 'error',
    })
    return
  }
  showDialogRef.value.showDialog2 = true
  showDialogRef.value.showForm2 = res.t
}
onMounted(() => {
  loadRoomType()
})

const formattedRoomImages = computed(() => {
  return roomTypeData.value.map(item => {
    if (item.room_image) {
      item.roomImageList = item.room_image.split(';');
    }
    console.log(item);

    return item;
  });
});
</script>

<template>
  <ExamDialog ref="dialogRef"></ExamDialog>
  <ShowDialog ref="showDialogRef"></ShowDialog>
  <el-row :gutter="20" justify="start" align="middle">
    <el-col :span="4">
      <el-select
          v-model="room"
          filterable
          placeholder="房型查询"
          style="width: 240px"
      >
        <el-option label="请选择" value=""/>
        <el-option label="单人间" value="1"/>
        <el-option label="双人间" value="2"/>
        <el-option label="三人间" value="3"/>
      </el-select>
    </el-col>
    <el-col :span="4">
      <el-select
          v-model="status"
          filterable
          placeholder="审核查询"
          style="width: 240px"
      >
        <el-option label="请选择" value=""/>
        <el-option label="已通过" value="已通过"/>
        <el-option label="未通过" value="未通过"/>
      </el-select>
    </el-col>
  </el-row>
  <el-table
      :data="formattedRoomImages"
      style="width: 100%"
  >
    <el-table-column label="序号" prop="id" width="100"/>
    <el-table-column label="酒店名称" prop="hotel_name"/>
    <el-table-column label="房间类型" prop="room_type"/>
    <el-table-column prop="roomImage" label="房型图片" width="180" >
      <template #default="scope">
        <div class="demo-image__preview" v-if="scope.row.roomImageList">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.roomImageList[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.roomImageList"
              :initial-index="4"
              fit="cover"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="审核员" prop="id"/>
    <el-table-column label="审核时间" prop="id"/>
    <el-table-column label="审核状态" prop="audit_status"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button v-if="scope.row.audit_status==='待审核'" size="middle" style="background-color: #ff6257;color: black"
                   @click="RoomTypeDialog(scope.row.id)">审核
        </el-button>
        <el-button v-else size="middle" style="background-color: #2b86c5;color: black"
                   @click="ShowHotelDialog(scope.row.id)">查看
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>